<template>
  <Modal title="增加"
         v-model="modelView"
         :mask-closable="false"
         :fullscreen="false"
         :width="720"
         :closable="false"
         @on-visible-change="changeVisible"
         @on-ok="ok">
    <Form ref="addForm" :model="formData" :label-width="90" :rules="ruleValidate">
      <Row>
        <Col :span="11">
          <FormItem label="客户端ID:" prop="clientId">
            <Input v-model="formData.clientId"/>
          </FormItem>
        </Col>
        <Col :span="11">
          <FormItem label="所属用户:" prop="userName">
            <Select v-model="formData.userName" clearable>
              <Option v-for="item in users" :key="item.userName" :value="item.userName">{{item.userName}}</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="11">
          <FormItem label="设备类型:" prop="clientType">
            <Input v-model="formData.clientType"/>
          </FormItem>
        </Col>
        <Col :span="11">
          <FormItem label="关联ID:" prop="refId">
            <Input v-model="formData.refId"/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="22">
          <FormItem label="设备说明:" prop="clientDesc">
            <Input type = "textarea" v-model="formData.clientDesc"/>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div slot="footer">
      <Button type="text" @click="cancel">取消</Button>
      <Button type="primary" :loading="buttonLoading" @click="ok">确定</Button>
    </div>
  </Modal>
</template>

<script>
  import {getUsers} from '@/api/mqtt/user'
  import {addClient} from '@/api/mqtt/client'

  export default {
    name: "add",
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        users: getUsers,
        modelView: false,
        formData: {},
        ruleValidate: {
          clientId: [
            {required: true, message: '客户端id不能为空', trigger: 'blur'}
          ],
          clientDesc: [
            {required: true, message: '设备说明不能为空', trigger: 'blur'}
          ]
        },
        buttonLoading: false
      }
    },
    watch: {
      visible(newVal) {
        this.modelView = newVal
      }
    },
    methods: {
      changeVisible() {
        this.formData = {}
        this.$emit('update:visible', this.modelView)
      },
      cancel() {
        this.modelView = false
      },
      ok() {
        const self = this
        self.$refs['addForm'].validate((valid) => {
          if (valid) {
            self.buttonLoading = true
            let newData = JSON.parse(JSON.stringify(self.formData))
            addClient(newData)
              .then(response => {
                self.buttonLoading = false
                self.modelView = false
                self.$Message.success({
                  content: '新增成功'
                })
                self.$emit('on-ok', newData)
              })
              .catch((err) => {
                self.isLoading = false
                self.$Message.error({
                  content: err,
                  duration: 10,
                  closable: true
                })
              })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
